<template>
    <a-row>
        <a-col :span="24" class="content-container" :style="`height: ${viewHeight}px`">
            <a-row>
                <a-col :span="24">
                    <div class="map-container" :style="`height: ${viewHeight - 30}px;position:relative`">
                        <div>
                            <el-image v-if="active == 2"
                                style="z-index: 2000;position:absolute;width: 450px; height: 450px;right: 0px; top:250px"
                                :src="w2" :fit="'contain'" />
                            <el-image v-if="active == 3"
                                style="z-index: 2000;position:absolute;width: 450px; height: 450px;right: 0px; top:250px"
                                :src="w3" :fit="'contain'" />
                            <el-image v-if="active == 4"
                                style="z-index: 2000;position:absolute;width: 450px; height: 450px;right: 0px; top:250px"
                                :src="w4" :fit="'contain'" />
                        </div>
                        <normalMap :geoserverURL="geoserverURL" v-if="currentTaskType == '500' || currentTaskType == '400'"
                            :currentRow="currentRow" ref="normalMapRef">
                        </normalMap>
                        <changeMap :geoserverURL="geoserverURL" v-if="currentTaskType == '300'"
                            :changeMapName="changeMapName" :currentRow="currentRow" ref="changeMapRef">
                        </changeMap>
                        <targetMap :geoserverURL="geoserverURL" v-if="currentTaskType == '600' ||
                            currentTaskType == '700' ||
                            currentTaskType == '900'
                            " :currentRow="currentRow" :changeMapName="changeMapName" ref="TargetMapRef">
                        </targetMap>
                        <div class="opeartion-card">
                            <div class="tiny-menu-con">
                                <span style="font-weight: 600"> </span>
                                <span v-show="!showCard" class="operation" @click="showCard = true">展开</span>
                                <span v-show="showCard" class="operation" @click="showCard = false">收起</span>
                            </div>
                            <div class="card-body" v-show="showCard">
                                <div class="filter-condition">
                                    <el-row>
                                        <el-col :span="19">
                                            <el-date-picker v-model="date" style="width: 100%" type="daterange"
                                                range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期"
                                                :size="'small'">
                                            </el-date-picker>
                                        </el-col>
                                        <el-col :span="5" style="text-align: right">
                                            <el-button :size="'small'" style="width: calc(100% - 5px)"
                                                @click="searchClickHandler">
                                                搜索
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                                <!--  <el-card class="type-card">
                                    <div v-for="(item, index) in taskGroup" :key="index">
                                        <el-row>
                                            <el-col :span="24" style="text-align: left; padding-bottom: 2px;">
                                                <span class="result-type"> {{ item.groupAlias }}</span>
                                            </el-col>
                                        </el-row>
                                        <el-radio-group text-color="#13c2c2" fill="#13c2c2" v-model="currentTask"
                                            size="small" @change="resultTypeChangeHandler()" style="width:100%">
                                            <el-radio :label="task" v-for="(task, id) in item.tasks" :key="id"
                                                :border="true">{{ task.taskname }}
                                            </el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-card> -->
                                <el-table v-show="false" ref="singleTableRef" :data="tableData" highlight-current-row
                                    style="width: 100%; margin-top: 5px" @current-change="handleCurrentChange" height="200"
                                    size="small" :border="true" v-loading="tableLoading">
                                    <el-table-column type="index" :align="'center'" width="50" />
                                    <el-table-column property="name" :align="'center'" label="灌溉轮数" width="80">
                                        <template #default="{ row }">
                                            第 {{ row.productindex }} 轮
                                        </template>
                                    </el-table-column>
                                    <el-table-column property="producttm" :align="'center'" label="日期">
                                        <template #default="{ row }">
                                            {{ row.producttm }}
                                        </template></el-table-column>
                                    <el-table-column :align="'center'" width="50">
                                        <template #default="{ row }">
                                            <el-icon color="#fff" v-if="currentTaskType == '500' ||
                                                currentTaskType == '400' ||
                                                currentTaskType == '300'
                                                " style="cursor: pointer" @click="showMapCardHandler">
                                                <View />
                                            </el-icon>
                                            <span v-if="currentTaskType == '600'"> — </span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-card class="box-card1">
                                    <template #header>
                                        <div class="card-header" style="display:flex;justify-content:space-between">
                                            <span style="font-weight:600" v-if="active == 1">驱动数据文件列表</span>
                                            <span style="font-weight:600" v-if="active == 2">模型输出文件列表</span>
                                            <span style="font-weight:600" v-if="active == 3">模型输出文件列表</span>
                                            <span style="font-weight:600" v-if="active == 4">模型输出文件列表</span>
                                            <!-- <el-button size="small" class="button" type="primary"> 模型运行</el-button> -->
                                        </div>
                                    </template>
                                    <el-radio-group v-model="radio3" v-if="active == 1">
                                        <ul style="height: 200px; overflow: scroll">

                                            <el-popover placement="right" :width="400" trigger="click">
                                                <template #reference>
                                                    <li class="selection"><el-radio label="1" size="large"
                                                            :border="true">2021010100.LDASIN_DOMAIN1</el-radio></li>
                                                </template>
                                                <el-table :data="gridData">
                                                    <el-table-column width="100" property="name" :align="'center'"
                                                        label="输出变量" />
                                                    <el-table-column width="150" property="date" :align="'center'"
                                                        label="日期" />
                                                    <el-table-column width="300">
                                                        <template #default="{ row }">
                                                            <el-button type="primary" link>操作</el-button>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </el-popover>
                                            <li class="selection"><el-radio label="2" size="large"
                                                    :border="true">2021010103.LDASIN_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="3" size="large"
                                                    :border="true">2021010106.LDASIN_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="4" size="large"
                                                    :border="true">2021010109.LDASIN_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="5" size="large"
                                                    :border="true">2021010112.LDASIN_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="6" size="large"
                                                    :border="true">2021010115.LDASIN_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="7" size="large"
                                                    :border="true">2021010118.LDASIN_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="8" size="large"
                                                    :border="true">2021010121.LDASIN_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="9" size="large"
                                                    :border="true">2021010200.LDASIN_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="10" size="large"
                                                    :border="true">2021010203.LDASIN_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="11" size="large"
                                                    :border="true">2021010206.LDASIN_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="12" size="large"
                                                    :border="true">2021010209.LDASIN_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="13" size="large"
                                                    :border="true">2021010212.LDASIN_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="14" size="large"
                                                    :border="true">2021010215.LDASIN_DOMAIN2</el-radio> </li>
                                            <li class="selection"><el-radio label="15" size="large"
                                                    :border="true">2021010218.LDASIN_DOMAIN2</el-radio> </li>
                                            <li class="selection"><el-radio label="16" size="large"
                                                    :border="true">2021010221.LDASIN_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="17" size="large"
                                                    :border="true">2021010300.LDASIN_DOMAIN1</el-radio> </li>
                                        </ul>
                                    </el-radio-group>
                                    <el-radio-group v-model="radio3" v-if="active != 1">
                                        <ul style="height: 200px; overflow: scroll">

                                            <el-popover placement="right" :width="400" trigger="click">
                                                <template #reference>
                                                    <li class="selection"><el-radio label="1" size="large"
                                                            :border="true">2021010100.LDASOUT_DOMAIN1</el-radio></li>
                                                </template>
                                                <el-table :data="gridData">
                                                    <el-table-column width="100" property="name" :align="'center'"
                                                        label="输出变量" />
                                                    <el-table-column width="150" property="date" :align="'center'"
                                                        label="日期" />
                                                    <el-table-column width="300">
                                                        <template #default="{ row }">
                                                            <el-button type="primary" link>操作</el-button>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </el-popover>
                                            <li class="selection"><el-radio label="2" size="large"
                                                    :border="true">2021010103.LDASOUT_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="3" size="large"
                                                    :border="true">2021010106.LDASOUT_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="4" size="large"
                                                    :border="true">2021010109.LDASOUT_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="5" size="large"
                                                    :border="true">2021010112.LDASOUT_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="6" size="large"
                                                    :border="true">2021010115.LDASOUT_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="7" size="large"
                                                    :border="true">2021010118.LDASOUT_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="8" size="large"
                                                    :border="true">2021010121.LDASOUT_DOMAIN1</el-radio></li>
                                            <li class="selection"><el-radio label="9" size="large"
                                                    :border="true">2021010200.LDASOUT_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="10" size="large"
                                                    :border="true">2021010203.LDASOUT_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="11" size="large"
                                                    :border="true">2021010206.LDASOUT_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="12" size="large"
                                                    :border="true">2021010209.LDASOUT_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="13" size="large"
                                                    :border="true">2021010212.LDASOUT_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="14" size="large"
                                                    :border="true">2021010215.LDASOUT_DOMAIN2</el-radio> </li>
                                            <li class="selection"><el-radio label="15" size="large"
                                                    :border="true">2021010218.LDASOUT_DOMAIN2</el-radio> </li>
                                            <li class="selection"><el-radio label="16" size="large"
                                                    :border="true">2021010221.LDASOUT_DOMAIN2</el-radio></li>
                                            <li class="selection"><el-radio label="17" size="large"
                                                    :border="true">2021010300.LDASOUT_DOMAIN1</el-radio> </li>
                                        </ul>
                                    </el-radio-group>
                                    <template #footer>Footer content</template>
                                </el-card>
                            </div>
                        </div>
                        <div class="kinds-container" v-show="false">
                            <div class="tiny-menu-con">
                                <span style="font-weight: 600"> 图例信息 </span>
                                <span v-show="!showCard2" class="operation" @click="showCard2 = true">展开</span>
                                <span v-show="showCard2" class="operation" @click="showCard2 = false">关闭</span>
                            </div>
                            <div class="card-body" v-show="showCard2">
                                <el-table v-if="currentTaskType == '500'" :data="tableData2" style="width: 100%"
                                    v-loading="kindsLoading" size="small">
                                    <el-table-column property="type" label="类型" :align="'center'" />
                                    <el-table-column property="area" :align="'center'" width="100" label="面积（km²）" />
                                    <el-table-column property="color" label="颜色" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex; justify-content: center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <el-table v-if="currentTask.code == '401' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="植被盖度检测" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex; justify-content: center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '403' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="生物量 (g/m²)" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex; justify-content: center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '405' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="土壤含水量计算" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex; justify-content: center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '407' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="灌溉面积识别" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex; justify-content: center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '408' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="灌溉水量计算" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex; justify-content: center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '409' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="种植结构" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex; justify-content: center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTaskType == '300' && showCard2" :data="tableData3"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="type" label="人类活动变化类型图例" :align="'center'" width="200" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex; justify-content: center">
                                                <div :style="`background: ${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="chart-container">
                            <!--  <div class="tiny-menu-con">
                                <span style="font-weight: 600"> 面积变化统计 </span>
                                <span v-show="!showCard3" class="operation" @click="showCard3 = true">展开</span>
                                <span v-show="showCard3" class="operation" @click="showCard3 = false">关闭</span>
                            </div>
                            <div class="card-body" v-loading="chartLoading">
                                <el-radio-group v-model="legendType" :size="'small'">
                                    <el-radio-button :label="item.name" v-for="(item, index) in areaStatistics" :key="index"
                                        @click="changeData(item.area)" />
                                </el-radio-group>
                                <div id="chartElement"></div>
                            </div> -->
                            <el-steps align-center :active="active" finish-status="success" simple>
                                <el-step title="制备驱动数据"></el-step>
                                <el-step title="双水源模型模拟"></el-step>
                                <el-step title="多要素协同"></el-step>
                                <el-step title="多要素联合同化"></el-step>
                            </el-steps>
                            <div class="btn-container">
                                <el-button size="large" v-if="active == 1" type="primary" style="margin-top: 12px;"
                                    @click="next">开始模拟</el-button>
                                <el-button size="large" v-if="active == 2" type="primary" style="margin-top: 12px;"
                                    @click="next">开始协同</el-button>
                                <el-button size="large" v-if="active == 3" type="primary" style="margin-top: 12px;"
                                    @click="next">同化开始</el-button>
                            </div>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </a-col>
    </a-row>
</template>
<script>
import {
    defineComponent,
    reactive,
    ref,
    toRefs,
    onMounted,
    watch,
    nextTick,
} from "vue";
// import { UserOutlined, LogoutOutlined, SettingOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
// import { View } from '@element-plus/icons-vue'
import floatWindow from "@/components/floatWindow.vue";
import "@/utils/mapUtils/leaflet/leaflet.css";
import * as echarts from "echarts";
import mock from "./mock.js";
import "@/utils/mapUtils/leaflet-side-by-side";
import "@/utils/mapUtils/src/leaflet.ChineseTmsProviders.js";
import normalMap from "@/components/mapComp/normalMap.vue";
import changeMap from "@/components/mapComp/changeMap.vue";
import targetMap from "@/components/mapComp/targetMap.vue";
import HttpService from "@/api/api";
import Utils from "@/utils/util.ts";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { getToken, setToken, removeToken } from "@/utils/auth.ts";
import { View } from "@element-plus/icons-vue";
import w2 from '@/assets/img/w2.png'
import w3 from '@/assets/img/w3.png'
import w4 from '@/assets/img/w4.png'
export default defineComponent({
    name: "Template",
    props: {
        prop: {
            type: String,
            required: false,
            default: () => {
                return "";
            },
        },
    },
    emits: ["emitsHandler"],
    components: {
        // UserOutlined,
        // LogoutOutlined,
        // SettingOutlined,
        floatWindow,
        // MenuFoldOutlined,
        // View,
        normalMap,
        changeMap,
        targetMap,
    },
    setup(props, context) {
        const geoserverURL = import.meta.env.VITE_GEOSERVER_URL;
        console.log(geoserverURL);
        var myChart = null;
        var option;
        var date = new Date();
        const router = useRouter();
        const data = reactive({
            viewHeight: window.innerHeight - 30,
            date: [
                new Date(2004, 1, 1, 0, 0, 0),
                new Date(date.getFullYear(), date.getMonth(), date.getDate(), 24, 0),
            ],
            showCard: true, //结果查询
            showCard2: true, //图例信息
            showCard3: true, //面积变化统计
            currentTask: {},
            currentTaskType: "",
            singleTableRef: null,
            tableData: [],
            tableData2: mock.classfiyResult.results[0].legend,
            tableData3: [
                { type: "新增", color: "rgb(255,0,0)" },
                { type: "扩大", color: "rgb(200,0,255)" },
                { type: "减少", color: "rgb(0,255,0)" },
            ],
            currentRow: {
                productindex: "",
            },
            tableLoading: false,
            chartLoading: false,
            kindsLoading: false,
            chartData: [],
            chartDate: [],
            legendType: "",
            areaStatistics: {},
            normalMapRef: null,
            changeMapRef: null,
            TargetMapRef: null,
            changeMapName: {
                before: "",
                after: "",
                json: "",
            },
            taskGroup: [],
            userInfo: JSON.parse(localStorage.getItem("sjy_userInfo")),
            radio3: "1",
            active: "1",
            w2,
            w3,
            w4,
            gridData: [
                {
                    name: "ZSNSO_SN",
                    date: "2021"
                },
                {
                    name: "SNICE ",
                    date: "2021"
                },
                {
                    name: "SNLIQ ",
                    date: "2021"
                },
                {
                    name: "SOIL_T ",
                    date: "2021"
                },
                {
                    name: "SOIL_W ",
                    date: "2021"
                }
                , {
                    name: "LH ",
                    date: "2021"
                }
                , {
                    name: "HFX ",
                    date: "2021"
                }
                , {
                    name: "FIRA ",
                    date: "2021"
                }
                , {
                    name: "GRDFLX ",
                    date: "2021"
                }
            ]
        });
        onMounted(() => {
            getTasksList();
        });

        const next = function () {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            setTimeout(() => {
                if (data.active++ > 3) data.active = 1;
                loading.close()
            }, 1000)
        }
        const getTasksList = function () {
            let params = {
                id: data.currentRow.objid,
            };
            HttpService.result.getTasksList(
                params,
                (res) => {
                    if (res.status == 200) {
                        data.taskGroup = [];
                        res.data.data.taskGroup.forEach((item) => {
                            if (item.groupCode !== "100" && item.groupCode !== "200") {
                                data.taskGroup.push(item);
                            }
                        });
                        data.currentTask = data.taskGroup[0].tasks[0];
                        data.currentTaskType = data.currentTask.type;
                        searchClickHandler();
                    }
                },
                (error) => {
                    console.log(error);
                }
            );
        };
        const handleSelect = (key, keyPath) => {
            console.log(key, keyPath);
        };
        const setCurrent = (row) => {
            data.singleTableRef.setCurrentRow(row);
        };
        const handleCurrentChange = function (row) {
            if (row) {
                data.currentRow = row;
                nextTick(() => {
                    if (data.currentTaskType == "500" || data.currentTaskType == "400") {
                        data.tableData2 = JSON.parse(row.stcjson).legend;
                        /* if (data.currentTaskType == "500") {
                                        changeData(data.areaStatistics[0].area)
                                    } */
                        data.normalMapRef.createMap();
                    } else {
                        data.showCard3 = false;
                        getChangeMap();
                    }
                });
            }
        };
        const getChangeMap = function () {
            let params = {
                id: data.currentRow.objid,
            };
            HttpService.result.getChangeMap(
                params,
                (res) => {
                    if (res.status == 200) {
                        data.changeMapName.before = res.data.data.qianurl;
                        data.changeMapName.after = res.data.data.houurl;
                        data.changeMapName.json = res.data.data.polyjson;
                        data.changeMapName.qianDate = res.data.data.qianname;
                        data.changeMapName.houDate = res.data.data.houname;
                        if (data.currentTaskType == "300") {
                            data.changeMapRef.createMap();
                        } else {
                            data.TargetMapRef.createMap();
                        }
                    }
                },
                (error) => {
                    console.log(error);
                }
            );
        };
        const showMapCardHandler = function () {
            data.showCard2 = true;
            data.showCard3 = true;
        };
        const createChart = function () {
            var chartDom = document.getElementById("chartElement");
            if (myChart != null && myChart != "" && myChart != undefined) {
                myChart.dispose();
            }
            myChart = echarts.init(chartDom);
            option = {
                xAxis: {
                    type: "category",
                    data: data.chartDate,
                    name: "日期",
                },
                yAxis: {
                    type: "value",
                    name: "km²",
                    axisTick: {
                        inside: true,
                    },
                    axisLabel: {
                        margin: 3,
                        textStyle: {
                            fontSize: 10, //更改坐标轴文字大小
                        },
                    },
                    min: function (value) {
                        return Math.floor(value.min);
                    },
                    scale: true,
                },
                tooltip: {
                    position: "top",
                    formatter: function (params) {
                        return params.value + "(km²)";
                    },
                },
                series: [
                    {
                        data: data.chartData,
                        type: "line",
                        lineStyle: {},
                        itemStyle: {
                            normal: {
                                color: "#13c2c2",
                            },
                        },
                    },
                ],
            };
            option && myChart.setOption(option);
        };
        const changeData = function (area) {
            data.chartData = [];
            area.forEach((item) => {
                data.chartData.push(item);
            });
            createChart();
        };
        const searchClickHandler = function (type) {
            data.tableLoading = true;
            if (data.date != "" && data.date != null) {
                let params = {
                    end: Utils.formatDateDay(data.date[1]),
                    start: Utils.formatDateDay(data.date[0]),
                    type: type ? type : 407,
                };
                HttpService.result.getResultList(
                    params,
                    (res) => {
                        if (res.status == 200) {
                            if (res.data.data.list.length !== 0) {
                                data.tableData = res.data.data.list;
                                data.tableLoading = false;
                                setCurrent(data.tableData[0]);
                                data.areaStatistics = res.data.data.areaStatistics;
                                // if (data.currentTaskType == '500') {
                                //     setChartData()
                                // }
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: "当前日期段内无检测结果",
                                });
                                data.tableLoading = false;
                            }
                        }
                    },
                    (error) => {
                        console.log(error);
                    }
                );
            } else {
                ElMessage({
                    showClose: true,
                    message: "请选择日期",
                });
                data.tableLoading = false;
            }
        };
        const setChartData = function () {
            data.chartData = [];
            data.areaStatistics[0].area.forEach((item) => {
                data.chartData.push(item);
            });
            data.chartDate = [];
            data.areaStatistics[0].year.forEach((item) => {
                data.chartDate.push(item);
            });
            data.legendType = data.areaStatistics[0].name;
            setTimeout(() => {
                createChart();
            }, 100);
        };
        const resultTypeChangeHandler = function () {
            data.currentTaskType = data.currentTask.type;

            searchClickHandler();
        };
        const logout = function () {
            ElMessageBox.confirm("确定要退出当前登录用户么?", "退出系统", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    router.push("/login");
                    removeToken("sjy_sys_token");
                    ElMessage({
                        type: "success",
                        message: "退出成功",
                    });
                })
                .catch(() => {
                    ElMessage({
                        type: "info",
                        message: "取消退出",
                    });
                });
        };
        return {
            ...toRefs(data),
            handleSelect,
            setCurrent,
            handleCurrentChange,
            searchClickHandler,
            changeData,
            resultTypeChangeHandler,
            showMapCardHandler,
            logout,
            geoserverURL,
            next,
        };
    },
});
</script>

<style lang="scss" scoped>
.flex-grow {
    flex-grow: 1;
}

.header-container {
    display: flex;
    flex-direction: row;
    height: 60px;
    background: #13c2c2;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 13px;

    .user-avatar {
        padding: 14px;
        height: 60px;
        width: 183px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;

        &:hover {
            background: hsla(0, 0%, 100%, 0.3);
        }
    }
}

.logo-container {
    width: 470px;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 24px;

    .logo-img {
        height: 32px;
        width: 48px;
        background: #fff;
        margin-right: 10px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    h1 {
        font-weight: 600;
        color: #fff;
        font-size: 18px;
        margin-right: 20px;
    }
}

.header-right-container {
    width: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .logout {
        height: 41px;
        line-height: 41px;
        padding: 0 14px;
        cursor: pointer;

        &:hover {
            background: hsla(0, 0%, 100%, 0.3);
        }
    }
}

.content-container {
    height: 200px;
    background: #f0f2f5;
}

.card-container {
    height: 400px;
    background: #fff;
    width: calc(100% - 20px);
    margin: 10px;
    margin-bottom: 0;
    border-radius: 12px;
}

.map-container {
    width: calc(100%);
    background: #fff;
    margin-bottom: 0;
    border-radius: 12px;

    img {
        height: 100%;
        width: 100%;
    }
}

.collapse-container {
    position: absolute;
    width: 300px;
    padding: 5px;
    left: 40px;
    top: 60px;
    background: #fff;
}

.tiny-menu-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    width: 100%;
    background: #fff;
    margin-bottom: 5px;
}

.operation {
    cursor: pointer;
    color: #13c2c2;
    font-size: 12px;
}

.mybox-leave-active,
.mybox-enter-active {
    transition: all 1s ease;
}

.mybox-leave-active,
.mybox-enter {
    height: 0px !important;
}

.mybox-leave,
.mybox-enter-active {
    height: auto;
}

.filter-condition {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.type-card {
    margin-top: 5px;
}

.kinds-container {
    position: absolute;
    top: 60px;
    right: 30px;
    width: 300px;
    background: #fff;
    border-radius: 5px;
    padding: 5px;
    z-index: 1000;
}

.chart-container {
    position: absolute;
    bottom: 0px;
    left: calc(calc(100% - 920px) / 2);
    width: 920px;
    background: #fff;
    border-radius: 5px;
    padding: 5px;
    height: 180px;
    z-index: 1000;
    padding: 30px 0 0;

    .btn-container {
        margin: 15px 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .el-button {
            width: 200px;
        }
    }
}

.card-body {
    padding: 10px;
}

#chartElement {
    width: 400px;
    height: 210px;
}

#map {
    height: 100%;
    width: 100%;
}
</style>
<style lang="scss">
.opeartion-card {
    position: absolute;
    top: 60px;
    left: 30px;
    width: 370px;
    background: #fff;
    padding: 5px;
    z-index: 10000;
}

.map-container {
    .opeartion-card {
        border-radius: 5px;
    }

    .el-drawer {
        width: 500px !important;
        position: absolute;
        left: calc(calc(100% - 500px) / 2) !important;
        bottom: 0;
    }
}

.type-card {
    .el-radio.el-radio--small {
        width: calc(50% - 5px);
        margin: 0;
        padding: 0;
        margin-bottom: 5px;
        margin-right: 5px;

        &:nth-of-type(2n) {
            margin-right: 0;
            width: calc(50%);
        }
    }

    .el-card__body {
        padding: 5px;
    }
}

.el-table__body tr.current-row>td.el-table__cell {
    background-color: #13c2c2 !important;
    color: #fff;
}

.el-picker__popper {
    z-index: 10000 !important;
}

.result-type {
    padding: 0 0 0 10px;
    font-size: 10px;
    font-weight: 600;
    position: relative;

    &::after {
        position: absolute;
        content: "";
        width: 5px;
        height: 12px;
        left: 0px;
        top: 0px;
        background: #13c2c2;
    }
}

.el-radio.is-bordered.is-checked {
    border-color: #13c2c2 !important;

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #13c2c2 !important;
        background: #13c2c2 !important;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #13c2c2 !important;
    }
}

.el-radio-button__original-radio:checked+.el-radio-button__inner {
    background-color: #13c2c2 !important;
    border-color: #13c2c2 !important;
}

a[title="A JS library for interactive maps"] {
    display: none;
}

.selection {
    margin-bottom: 10px;

    .el-radio {
        width: 315px !important;
    }

}

.box-card1 {
    .el-card__body {
        padding: 10px;
    }
}
</style>
